import { TranslationOutlined, SmileOutlined } from '@ant-design/icons'
import { Dropdown, Space } from 'antd'
import type { MenuProps } from 'antd'
import Style from './index.module.scss'
import { useSelector, useDispatch } from 'react-redux'
import { localeChange } from '@/store/modules/setting'
interface MenuTypes {
  key: string
  label: string
}
const LangDropdown = () => {
  const dispatch = useDispatch()
  const items: MenuTypes[] = [
    {
      key: 'zh_CN',
      label: '简体中文',
    },
    {
      key: 'en_US',
      label: 'English',
    },
    {
      key: 'ru_RU',
      label: 'Русский',
    },
  ]
  const { localeLang } = useSelector(
    (state: { setting: { localeLang: string } }) => state.setting,
  )
  /* 
    点击切换语言
  */
  const onClick: MenuProps['onClick'] = ({ key }) => {
    if (localeLang === key) return
    dispatch(localeChange(key))
  }
  return (
    <div className={Style.mainBox}>
      <Dropdown
        trigger={['click']}
        menu={{
          items,
          onClick,
        }}
        placement="bottom"
        arrow
      >
        <Space>
          <div className={Style.title}>
            <TranslationOutlined className={Style.icon} />
            {/* 简体中文 */}
            {items.find((item: MenuTypes) => item.key === localeLang)?.label}
          </div>
        </Space>
      </Dropdown>
    </div>
  )
}
export default LangDropdown
